<template>
  <view class="contenter">
    <indextime></indextime>
    <view class="main u-flex" v-for="(data,index) in 4">
      <view v-if="index < 3" class="img">
        <u-image src="/static/user/bang1.png" width="56" height="56" v-if="index === 0"></u-image>
        <u-image src="/static/user/bang2.png" width="56" height="56" v-if="index === 1"></u-image>
        <u-image src="/static/user/bang3.png" width="56" height="56" v-if="index === 2"></u-image>
      </view>
      <view v-else  class="img">
        <view class="index">{{index +1 }}</view>
      </view>
      <item-image :img="'/static/login/loginBg.png'" :height="160" :width="160"></item-image>
      <view class="flex_bt flex-column flex shi">
        <view class="name">植物染发</view>
        <view class="u-flex flex_bt">
          <view class="gay">已售1888件</view>
          <view class="price">￥556</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Indextime from "../../components/index/indexTime";
export default {
name: "index",
  components: {Indextime}
}
</script>

<style scoped lang="scss">
  .main{
    height: 220rpx;
    background: #FFFFFF;
    width: 100%;
    padding: 0 32rpx;
    margin-top: 20rpx;
    .img{
      margin-right: 20rpx;
      .index{
        width: 56rpx;
        height: 56rpx;
        line-height: 52rpx;
        text-align: center;
        border: 4rpx solid $uni-color-primary;
        color: $uni-color-primary;
        border-radius: 50%;
      }
    }
    .name{
      font-size: 32rpx;
      color: #3B3B3B;
    }
    .gay{
      color: #959595;
      font-size: 28rpx;
    }
    .price{
      font-size: 42rpx;
      color: #E86823;
    }
    .shi{
      height: 160rpx;
      margin-left: 20rpx;
      width: 100%;
    }
  }
</style>